<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="pragram" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
  <title>wjc-easy-element-ui</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-button @click="showDialog">显示弹框</el-button>
    <el-button @click="showFormDialog">显示表单弹框</el-button>
    <v-crud
      style="height:600px"
      ref="VCrud"
      v-bind="crudAttrs"
      @search="statistic"
    >
      <template #table-top>
        <el-button type="primary" @click="statistic">统计</el-button>
        <el-button type="danger" @click="batchDelete">批量删除</el-button>
        <el-button type="warning">批量处理</el-button>
      </template>
    </v-crud>
    <my-dialog ref="MyDialog">123</my-dialog>
    <form-dialog ref="FormDialog"></form-dialog>
    <div>234</div>
  </div>
  <script src="./vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script type="module">
    import { crudAttrs } from './example/crud.js'
    import { MyDialog } from './example/MyDialog.js'
    import { FormDialog } from './example/FormDialog.js'

    new Vue({
      el: '#app',
      
      data: function() {
        return {
          crudAttrs
        }
      },

      components: {
        'my-dialog': MyDialog,
        'form-dialog': FormDialog,
        VCrud: WjcEasyElementUI.VCrud
      },

      created() {
        console.log(this, 'this');
      },

      mounted() {
        console.log(this.$options.render.call(this), 'render vnode');
      },

      methods: {
        showFormDialog() {
          this.$refs.FormDialog.show()
        },
        showDialog() {
          this.$refs.MyDialog.show()
        },
        statistic(params) {
          console.log(this.$refs.VCrud.getQueryParams(), 'getQueryParams');
          console.log('statistic', params);
        },
        async batchDelete() {
          const items = await this.$refs.VCrud.getSelectedItems({
            tooltip: '请选择待审核的订单',
            filter: item => true,
            confirm: true
          })
          this.$refs.VCrud.refresh()
          console.log(items, '删除成功');
        }
      }
    })
  </script>
</body>

</html>